﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>地址管理</title>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/layer")
    <link href="~/Content/Cleaning.css" rel="stylesheet" />
</head>
<body>
    <!--表单信息-->
    <div class="main">
        <div class="area">
            <header class="formHeader">
                必填项
            </header>
            <section>
                <div class="formContainer">
                    <span class="spanTitle">联系人<font color="red">*</font></span>
                    <span class="spanInput">
                        <input type="text" placeholder="请输入姓名" id="RealName" maxlength="10" />
                    </span>
                </div>
                <div class="formContainer">
                    <span class="spanTitle">手机号码<font color="red">*</font></span>
                    <span class="spanInput">
                        <input type="text" placeholder="请输入11位手机号码" id="UserPhone" maxlength="11" />
                    </span>
                </div>
                <div class="formContainer">
                    <span class="spanTitle">所在区域<font color="red">*</font></span>
                    <span class="spanInput">
                        <span id="PoiAddress" class="spanLikeInput">区域信息</span>
                        <input id="Lat" type="hidden" value="" />
                        <input id="Lng" type="hidden" value="" />
                        <span class="selectIcon"></span>
                    </span>
                </div>
                <div class="formContainer">
                    <span class="spanTitle">详细地址<font color="red">*</font></span>
                    <span class="spanInput">
                        <input type="text" placeholder="请输入详细地址" id="Address" maxlength="50" />
                    </span>
                </div>
                <div class="formContainer" style="border-bottom:none;">
                    <input type="checkbox" id="IsDefault" />  设为默认地址
                </div>
            </section>
        </div>
        <div style="width:100%; text-align:center; margin-top:0.4rem;">
            <button id="submitForm">提交</button>
        </div>
    </div>


    <div class="TecentSite mainContainer" style="display:none;">
        <div style="height:92%;">
            <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="http://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"></iframe>
        </div>
        <div class="btnContainer">
            <button class="btn" id="tencentCheck">确定</button>
        </div>
    </div>

    <div class="selectContainer selectProvince" id="selectProvince" style="display:none">
        <header>
            所在省份
            <span class="closeSelect">关闭</span>
        </header>
        <section id="provinceOptions">
            <p>北京市</p>
            <p>江西省</p>
            <p>广东省</p>
            <p>湖南省</p>
            <p>浙江省</p>
            <p>江苏省</p>
            <p>广东省</p>
            <p>湖南省</p>
            <p>浙江省</p>
            <p>江苏省</p>
        </section>
    </div>

    <div class="selectContainer selectCity" id="selectCity" style="display:none">
        <header>
            所在城市
            <span class="closeSelect">关闭</span>
        </header>
        <section id="cityOptions">
            <p>南昌市</p>
            <p>丰城市</p>
            <p>宜春市</p>
            <p>樟树市</p>
            <p>抚州市</p>
            <p>九江市</p>
            <p>南丰市</p>
            <p>赣州市</p>
            <p>景德镇市</p>
            <p>无语市</p>
        </section>
    </div>

    <script src="~/Scripts/PageInit.js"></script>
    <script type="text/javascript">
        var locationInfo = "";
        window.addEventListener('message', function (event) {
            // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
            var loc = event.data;
            if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                console.log('location', loc);
                locationInfo = loc;
            }
        }, false);
        $(function () {
            $("#tencentCheck").on("click", function () {
                if (!locationInfo) {
                    layer.msg("请选择服务地址");
                }
                else {
                    $(".TecentSite").hide();
                    $("#PoiAddress").text(locationInfo.poiaddress + locationInfo.poiname);
                    $("#Lat").val(locationInfo.latlng.lat);
                    $("#Lng").val(locationInfo.latlng.lng);
                }
            })

            //=================选择地址下拉框=====================
            $("#PoiAddress").on("click", function () {
                $(".TecentSite").show();
                //$("#selectProvince").show();
            })
            $(".closeSelect").on("click", function () {
                $(".selectContainer").hide();
            })

            $("#provinceOptions p").on("click", function () {
                //获取城市列表
                $("#selectCity").show();
            })

            $(document).on("click", "#cityOptions p", function () {
                //获取城市列表
                $(".selectContainer").hide();
            })


            //表单提交
            $("#submitForm").on("click", function () {
                let _data = {};
                _data.RealName = $("#RealName").val();
                _data.UserPhone = $("#UserPhone").val();
                _data.Lat = $("#Lat").val();
                _data.Lng = $("#Lng").val();
                _data.PoiAddress = $("#PoiAddress").text();
                _data.Address = $("#Address").val();
                _data.IsDefault = $("#IsDefault").is(":checked");

                if (!_data.RealName) {
                    layer.msg("请输入联系人姓名");
                    return false;
                }
                if (!_data.UserPhone) {
                    layer.msg("请输入手机号码");
                    return false;
                }
                if (!_data.Lat || !_data.Lng) {
                    layer.msg("请选择所在区域");
                    return false;
                }
                if (!_data.Address) {
                    layer.msg("请输入详细地址");
                    return false;
                }
                console.log(_data);
            })
        })
    </script>
</body>
</html>
